<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位问题</title>
		<style>
			/* 相对定位 相对于父级元素进行定位，没有父级按照body进行定位，不脱离文档流
			   绝对定位：在父级元素中按照页面左侧顶角进行定位，在父级元素中，首先按照父级定位，脱离文档流
			*/
			.d{
				width: 300px;
				height: 300px;
				background: #f00;
				border-radius: 50%;
				posit ion: relative;
				position: absolute;
				top: 0;
				left: 0;
			}
			/* 需求：5个圆，每个圆颜色不同
			类选择器使用问题：  常用模式：3个别名
			       html语法：  class
			*/
		   .d1{
			   background: #f00;
		   }
		   .d2{
			   background: #ffaa00;
		   }
		   .d3{
			   background: #ffff00;
		   }
		   .d4{
			   background: #00ff00;
		   }
		   .d5{
			   background: #0055ff;
		   }
		</style>
	</head>
	<body>
		<!-- 创建4个div  1个p-->
        <div class="d d1"></div>
        <div class="d d2"></div>
        <div class="d d3"></div>
        <p class="d d4"></p>
        <div class="d d5"></div>
	</body>
</html>